<template>
  <div class="vipProduct">
    <el-table :data="vipList" border style="width: 100%">
      <el-table-column label="产品图片" align="center">
        <template v-slot="{ row }">
          <img shape="square" width="80" :src="row.imageUrl" />
        </template>
      </el-table-column>
      <el-table-column align="center" prop="productName" label="产品名称">
      </el-table-column>
      <el-table-column align="center" prop="description" label="产品描述">
      </el-table-column>
      <el-table-column align="center" prop="price" label="单价(元)">
      </el-table-column>
      <el-table-column align="center" prop="inventory" label="库存">
      </el-table-column>
      <el-table-column align="center" prop="opration" label="操作">
        <template v-slot="{ row }">
          <el-button class="iconfont icon-viphuiyuan" @click="pre_order(row)"
            >充值</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import * as api from "../../../api/index";
import {mapMutations} from "vuex"
export default {
  data() {
    return {
      vipList: [],
    };
  },
  created() {
    api.vipProduct("20210827165510715").then((res) => {
      if (res.data.state) {
        this.vipList = res.data.data;
      } else {
        this.$message.console.error("获取失败");
      }
    });
  },
  methods: {
      ...mapMutations(['SET_CURRENTCHARGEPRODUCT']),
    pre_order(row) {
      this.$confirm(`是否确认购买${row.productName}?`, "购买提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "success",
      })
        .then(() => {
            row.quantity = 0
            this.SET_CURRENTCHARGEPRODUCT(row)
            this.$router.push({name:"pre_order"})
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消购买",
          });
        });
    }
  }
}
</script>
<style>
.icon-viphuiyuan {
  background: dodgerblue;
  color: #fff;
}
</style>